<script setup lang="ts">
import Detail from './dialog/detail/index.vue';
import { searchConfig } from './config/search-config';
import { tableConfig } from './config/table-config';
import { Plus, Delete } from '@element-plus/icons-vue';
import paramsStore from '@/store/modules/paramsStore';
import { doGetProcessList, doDelProcessList } from '@/api/modeling/ProcessManagement/index';
import type { ProcessListListInfo } from '@/api/modeling/ProcessManagement/model/type';

defineOptions({
    name: 'ProcessManagement'
});

const router = useRouter();
const { handleAddData } = addDataStore();

/**
 * 搜索模块
 */
const tableRef = ref<TableRef>();
const searchRef = ref<SearchRef>();
const selectIds = ref<number[]>([]);
const processList = ref<ProcessListListInfo[]>([]);
const handleSelection = (list: ProcessListListInfo[]) => {
    processList.value = list;
    selectIds.value = list.map((item: ProcessListListInfo) => item.id!);
};

/**
 * @: 表格新增
 */
const handleAdd = () => {
    handleAddData('processAddData'); // 如果是新增就重置数据
    tableRef.value?.clearSelection();
    router.push('/process/add');
};

/**
 * 编辑
 */
const handleDialog = (row: ProcessListListInfo) => {
    router.push({
        path: '/process/edit',
        query: {
            id: row.id
        }
    });
};

// 删除数据
const { handleDel, rowDel } = useDelRow(tableRef, selectIds, doDelProcessList);
const { setMaterialCode } = paramsStore();
const jump = (materialCode: string) => {
    setMaterialCode(materialCode);
    router.push('/materialsManagement');
};

/**
 * 查看
 */
const modelRef = ref();
const handleView = (row: ProcessListListInfo) => {
    modelRef.value.open(row.id);
};
</script>

<template>
    <q-page class="process-page">
        <base-search
            ref="searchRef"
            :table-ref="tableRef"
            :search-config="searchConfig"
        ></base-search>
        <base-table
            ref="tableRef"
            :tableConfig="tableConfig"
            :getDataFn="doGetProcessList"
            action-width="160"
            @edit="row => handleDialog(row)"
            @selectionChange="handleSelection"
            @del="rowDel"
        >
            <template #tableHeadStart>
                <el-button type="primary" :icon="Plus" @click="handleAdd"> 新增 </el-button>
            </template>
            <template #tableHeadEnd>
                <el-button
                    :icon="Delete"
                    :disabled="!selectIds.length"
                    class="m-r-16"
                    @click="handleDel(`选中${selectIds.length}行数据，删除后无法恢复，确认删除？`)"
                    >删除</el-button
                >
            </template>

            <!-- 查看 -->
            <template #preBtn="{ row }">
                <el-link type="primary" @click="handleView(row)">查看</el-link>
            </template>

            <!-- 物料编码 -->
            <template #materialCode="{ row }">
                <el-link type="primary" @click="jump(row.materialCode)">{{
                    row.materialCode || '--'
                }}</el-link>
            </template>

            <!-- 工艺备注 -->
            <template #processRemark="{ row }">
                <el-text v-if="row.processRemark" type="danger">待编辑</el-text>
                <span v-else>--</span>
            </template>
        </base-table>

        <!-- 查看详情 -->
        <Detail ref="modelRef" />
    </q-page>
</template>

<style lang="scss" scoped>
@include b(process-page) {
    padding-top: 0;
}
</style>
